<template>
  <div class="code-editor" @mouseenter="showToolbar = true" @mouseleave="showToolbar = false">
    <div v-if="showToolbar" class="toolbar">
      <el-button ref="changeBtn" class="fullscreen-btn" @click="toggleFullscreen">全屏模式</el-button>
    </div>
    <textarea ref="textarea" v-show="false"></textarea>
  </div>
</template>

<script>
import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';
// 主题
import 'codemirror/theme/idea.css';
import 'codemirror/theme/dracula.css';
import 'codemirror/mode/clike/clike';
import 'codemirror/mode/javascript/javascript';
import 'codeMirror/addon/display/autorefresh';
// 搜索
import 'codemirror/addon/scroll/annotatescrollbar.js';
import 'codemirror/addon/search/matchesonscrollbar.js';
import 'codemirror/addon/search/match-highlighter.js';
import 'codemirror/addon/search/jump-to-line.js';
import 'codemirror/addon/dialog/dialog.js';
import 'codemirror/addon/dialog/dialog.css';
import 'codemirror/addon/search/searchcursor.js';
import 'codemirror/addon/search/search.js';
// 折叠
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/fold/foldcode';
import 'codemirror/addon/fold/foldgutter';
import 'codemirror/addon/fold/brace-fold';
import 'codemirror/addon/fold/comment-fold';
// 导入当前行高亮插件
import 'codemirror/addon/selection/active-line';
// 支持代码区域全屏功能
import 'codemirror/addon/display/fullscreen.css';
import 'codemirror/addon/display/fullscreen';
// 行注释插件
import 'codemirror/addon/comment/comment';
// 导入 lint
import 'codemirror/addon/lint/lint';
import 'codemirror/addon/lint/lint.css';
import 'codemirror/addon/lint/json-lint';
// 引入 jsonlint 进行 JSON 语法检查
import jsonlint from 'jsonlint-mod';
// 必须将 jsonlint 暴露到全局
window.jsonlint = jsonlint;
// 格式化
import formatter from '@/utils/formatter';

export default {
  data() {
    return {
      showToolbar: false
    };
  },
  editor: null,
  isFullscreen: false,
  name: 'CodeEditor',
  props: {
    modelValue: {
      type: String,
      required: true,
      default: ''
    },
    height: {
      type: String,
      default: '200px'
    },
    mode: {
      type: String,
      default: 'application/json'
    },
    theme: {
      type: String,
      default: 'dracula'
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
      mode: this.mode, // 默认设置为 'javascript' 或根据需要配置
      theme: this.theme, // 直接设置主题或根据需要配置
      readOnly: this.readonly,
      autoRefresh: true,
      lineNumbers: true,
      lineWrapping: true,
      tabSize: 2,
      foldGutter: true,
      styleActiveLine: true, // 启用当前行高亮
      fullScreen: this.isFullscreen, // 全屏模式
      lint: false, // 启用 lint 检查
      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
      extraKeys: {
        // 绑定快捷键 Ctrl-F / Cmd-F 开启搜索
        'Ctrl-F': 'findPersistent',
        'Cmd-F': 'findPersistent',
        // 如果需要，您还可以添加 "Ctrl-R"/"Cmd-R" 绑定替换功能
        'Ctrl-R': 'replace',
        'Cmd-R': 'replace',
        // Ctrl-/ 键切换行注释
        'Ctrl-/': 'toggleComment'
      }
    });

    // 设置高度
    this.editor.setSize('auto', this.height);

    // 设置文本
    const editorValue = this.mode === 'application/json' ? formatter.prettyCode(this.modelValue) : this.modelValue;
    if (editorValue.trim() !== '') {
      this.editor.setOption('lint', true);
    }
    this.editor.setValue(editorValue);

    this.editor.on('change', () => {
      if (this.editor.getValue().trim() !== '' && !this.editor.getOption('lint')) {
        this.editor.setOption('lint', true);
      }
      if (this.editor.getValue().trim() === '' && this.editor.getOption('lint')) {
        this.editor.setOption('lint', false);
      }
      this.$emit('update:modelValue', this.editor.getValue()); // 更新 modelValue
    });
  },
  watch: {
    modelValue(newVal) {
      if (newVal !== this.editor.getValue()) {
        const editorValue = this.mode === 'application/json' ? formatter.prettyCode(this.modelValue) : this.modelValue;
        this.editor.setValue(editorValue);
      }
    },
    height(newHeight) {
      this.editor.setSize('auto', newHeight);
    },
  },
  methods: {
    // 切换全屏模式
    toggleFullscreen() {
      if (this.isFullscreen) {
        this.editor.setOption('fullScreen', false);
        this.isFullscreen = false;
        this.$refs.changeBtn.$el.innerText = '全屏模式';
      } else {
        this.editor.setOption('fullScreen', true);
        this.isFullscreen = true;
        this.$refs.changeBtn.$el.innerText = '退出全屏';
      }
    }
  }
};
</script>

<style scoped>
.code-editor {
  line-height: 1.2 !important;
  width: calc(100% - 4px);
  height: 100%;
  border: 1px solid #ccc; /* 添加边框样式 */
}

.toolbar {
  position: absolute;
  top: 10px;
  right: 35px;
  z-index: 1000;
}

.fullscreen-btn {
  padding: 8px 12px;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.fullscreen-btn:hover {
  opacity: 1;
}
</style>
